﻿@page "/MemberData"
@using iOSClub.App.Share

<PageTitle>成员数据 - iAdmin</PageTitle>

<InputFile id="fileInput" OnChange="@UploadFiles" hidden multiple/>
<Modal Title="@("Title")"
       Visible="@_visible"
       OnCancel="@HandleCancel"
       Footer="null">
    <Space>
        <SpaceItem>
            <Button Type="@ButtonType.Primary" OnClick="@CsvDownload">下载Csv文件</Button>
        </SpaceItem>
        <SpaceItem>
            <Button Type="@ButtonType.Primary" OnClick="@JsonDownload">下载Json文件</Button>
        </SpaceItem>
        <SpaceItem>
            <Button Type="@ButtonType.Primary" OnClick="@HandleCancel">取消</Button>
        </SpaceItem>
    </Space>

</Modal>

<PageView ContextStyle="padding:10px;">
    <Extra>
        <Space>
            <SpaceItem>
                <Button Type="@ButtonType.Primary" OnClick="@FileDownload">下载文件</Button>
            </SpaceItem>
            <SpaceItem>
                <div class="desktop-phone-flex">
                    <Upload Name="files">
                        <label class="ant-btn" for="fileInput">上传Json数据</label>
                    </Upload>
                </div>
            </SpaceItem>
        </Space>
    </Extra>
    <Context>
        <Tabs Centered>
            <TabPane Tab="成员数据" Key="1">
                <Flex Justify="center" Gap="large">
                    <Space>
                        <SpaceItem>
                            <Select DataSource="@SearchItems"
                                    @bind-Value="@SearchItem">
                            </Select>
                        </SpaceItem>
                        <SpaceItem>
                            <Search Placeholder="请输入搜索项" EnterButton="@("搜索")" @bind-Value="@SearchValue" Size="large"/>
                        </SpaceItem>
                    </Space>
                    <Statistic GroupSeparator=" " Title="当前成员" Value="@Total" TValue="int" Class="desktop-phone">
                        <PrefixTemplate>
                            <Icon Type="team" Theme="outline"/>
                        </PrefixTemplate>
                    </Statistic>
                </Flex>
                <Spin Spinning="@RunningStyle">
                    <Table TItem="StudentModel" DataSource="@Models" Responsive>
                        <PropertyColumn Title="姓名" Property="c => c.UserName"/>
                        <PropertyColumn Title="学号" Property="c => c.UserId"/>
                        <PropertyColumn Title="学院" Property="c => c.Academy"/>
                        <PropertyColumn Title="政治面貌" Property="c => c.PoliticalLandscape"/>
                        <PropertyColumn Title="性别" Property="c => c.Gender"/>
                        <PropertyColumn Title="专业班级" Property="c => c.ClassName"/>
                        <PropertyColumn Title="手机号码" Property="c => c.PhoneNum"/>
                    </Table>
                </Spin>
            </TabPane>
            <TabPane Tab="历年人数" Key="2">
                <AntDesign.Charts.Line Data="_yearData" Config="_yearConfig"/>
            </TabPane>
            <TabPane Tab="学院分布" Key="3">
                <AntDesign.Charts.Pie Data="_collegeData" Config="_collegeConfig"/>
            </TabPane>
            <TabPane Tab="年级分布" Key="4">
                <AntDesign.Charts.Bar Data="_gradeData" Config="_gradeConfig"/>
            </TabPane>
            <TabPane Tab="男女比例" Key="5">
                <AntDesign.Charts.Pie Data="_genderData" Config="_collegeConfig"/>
                <Text>@GenderWord</Text>
            </TabPane>
            <TabPane Tab="政治面貌" Key="6">
                <AntDesign.Charts.Column Data="_landscapeData" Config="_landscapeConfig"/>
            </TabPane>
        </Tabs>
    </Context>
</PageView>